<template>
  <div class="container">
    <div class="error" v-if="error.statusCode === 404">
      <el-result :title="title" :subTitle="subTitle">
        <template slot="icon">
          <img src="@/static/image/404.svg" alt="error">
        </template>
        <template slot="extra">
          <el-button type="primary" size="medium" @click="go">返回</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: "navigation",
  props: ['error'],
  computed: {
    ...mapState({
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "错误页" + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords },
        { hid: 'description', name: 'description', content: this.nav_config.description },
      ]
    }
  },
  data(){
    return{
      title: "",
      subTitle: ""
    }
  },
  mounted() {
    switch (this.error.statusCode) {
      case 404:
        this.title = "404";
        this.subTitle = "抱歉，您请求的页面不存在";
        break;
      default:
        this.title = "500";
        this.subTitle = "发生一个错误";
    }
  },
  methods: {
    go(){
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.error{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
